<template>
    <view class="container">
        <view class="logo"></view>
        <u-text
            text="欢迎加入·即刻登录"
            size="32rpx"
            color="#979797"
            block
            align="center"
            lineHeight="45rpx"
            margin="31rpx auto auto auto"
        ></u-text>
        <view class="input-item" style="margin-top: 135rpx">
            <u-input
                placeholder="请输入手机号"
                border="none"
                fontSize="26rpx"
                color="#000000"
                placeholderStyle="color: #ABAFB9; font-size: 26rpx"
                v-model="mobile"
                @change="changValue"
            ></u-input>
        </view>
        <view class="input-item">
            <u-input
                placeholder="请输入验证码"
                border="none"
                fontSize="26rpx"
                placeholderStyle="color: #ABAFB9; font-size: 26rpx"
                v-model="code"
            >
                <template slot="suffix">
                    <u-code
                        ref="uCode"
                        @change="codeChange"
                        changeText="重新发送(Xs)"
                        keep-running
                        @end="end"
                    ></u-code>
                    <u-text
                        :text="tips"
                        @click="showCaptcha()"
                        size="24rpx"
                        :color="btn_disenble? '#9DA1AD':'#27334E'"
                    >
                    </u-text>
                </template>
            </u-input>
        </view>
        <view class="user-agreement">
            <view class="user-radio" @click="isAgree = !isAgree" :class="isAgree? 'radio-check':'radio-uncheck'"></view>
            <view class="user-agreement-info">
                <view class="user-agreement-desc">勾选表示同意一品平台</view>
                <view class="user-agreement-name" @click="$u.route('pages/article/detail', {articleKey:'agreement'})">《用户协议》</view>
                <view class="user-agreement-desc">和</view>
                <view class="user-agreement-name" @click="$u.route('pages/article/detail', {articleKey:'privacy'})">《隐私政策》</view>
            </view>
        </view>
        <view class="bottom">
            <u-button
                text="立即登录"
                class="custom-style"
                :disabled="isSubmit || !isAgree"
                :customStyle="{
                    background: '#000000',
                    color: '#ffffff',
                    height: '90rpx',
                    fontSize: '30rpx',
                    borderRadius: '45rpx'
                }"
                @click="onsubmit"
            ></u-button>
            <!--view class="btn-zc">注册账号</view-->
        </view>
        <u-popup
            :show="popupShow"
            mode="center"
            @close="popupShow = false"
            :customStyle="{
                width: '620rpx',
                background: '#FFFFFF',
                boxShadow: '0px 0px 13rpx 0px #999999',
                borderRadius: '18rpx',
                overflow: 'hidden'
            }"
        >
            <popup-context
                v-if="popupShow"
                @cancel="popupShow = false"
                :p_type="'verifyCode'"
                @confirm="captchaConfirm"
                :extData="extData"
            ></popup-context>
        </u-popup>
    </view>
</template>
<script>
    import { getCode, getCaptcha } from "@/config/api-java"
    import PopupContext from "@/components/PopupContext"
    export default {
        components: {
            PopupContext
        },
        data() {
            return {
                tips: "发送验证码",
                btn_disenble: false,
                mobile: null,
                code: null,
                isRelieve: false,
                isSubmit: true,
                isAgree: false,
                captchaData: {},
                captchaShow: false,
                captcha: null,
                popupShow: false,
                extData: {
                    mobile: null
                }
            }
        },
        onLoad(option) {
            this.isRelieve = option.isRelieve
        },
        methods: {
            codeChange(text) {
                this.tips = text
            },
            end() {
                this.btn_disenble = false
            },
            async onsubmit() {
                uni.showLoading()
                const res = await this.$store.dispatch("user/webLogin",{
                    mobile: this.mobile,
                    code: this.code
                })
                uni.$u.toast('登录成功');
                uni.$u.route({type: "navigateBack"})
            },
            changValue(text) {
                if(uni.$u.test.mobile(text)) {
                    this.isSubmit = false
                } else {
                    this.isSubmit = true
                }
            },
            async showCaptcha() {
                if (!this.$u.test.mobile(this.mobile)) {
                    this.$u.toast('请填写正确手机号码')
                    return
                }
                if (this.btn_disenble) {
                    return
                }
                this.extData.mobile = this.mobile
                this.popupShow = true
            },
            captchaConfirm() {
                this.$refs.uCode.start();
                this.btn_disenble = true
                this.popupShow = false
                this.$u.toast('验证码获取成功')
            }
        }
    }
</script>
<style lang="scss" scoped>
    .container {
        background: #f0f2f5;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        box-sizing: border-box;
        padding: 177rpx 70rpx 0 70rpx;
        .logo {
            width: 199rpx;
            height: 133rpx;
            background: url(https://img.ionepin.com/f4259d653729f10cc8d5ee44f1e23eff8a85e7c3.png) no-repeat;
            background-size: 100% 100%;
            margin: auto;
            //margin: 240rpx auto 0 auto;
        }
        .input-item {
            margin-top: 50rpx;
            padding-bottom: 30rpx;
            padding-left: 21rpx;
            border-bottom: 1px solid #ECECEC;
            .btn-code {
                width: 180rpx;
                height: 56rpx;
                border-radius: 2rpx;
                border: 1rpx solid #000000;
                text-align: center;
                line-height: 56rpx;
                font-size: 24rpx;
            }
            .btn-code-disenble {
                width: 180rpx;
                height: 56rpx;
                border-radius: 2rpx;
                color: #888888;
                border: 1rpx solid #999999;
                text-align: center;
                line-height: 56rpx;
                font-size: 24rpx;
            }
        }
        .user-agreement {
            display: flex;
            align-items: center;
            margin-top: 33rpx;
            .user-radio {
                width: 44rpx;
                height: 44rpx;
            }
            .radio-uncheck {
                background: url("https://ionepin-dev.oss-cn-shenzhen.aliyuncs.com/e76794ff37d7b6bcac67cdef9e3280dbda852c60.png") no-repeat;
                background-size: 100% 100%;
            }
            .radio-check {
                background: url("https://ionepin-dev.oss-cn-shenzhen.aliyuncs.com/ab27d2bd37a8e8ea34e64ce322045df56ff7a834.png") no-repeat;
                background-size: 100% 100%;
            }
            .user-agreement-info {
                display: flex;
                font-size: 22rpx;
                font-weight: 400;
                line-height: 1.5;
                .user-agreement-desc {
                    color: #888888;
                }
                .user-agreement-name {
                    color: #356CE7;
                }
            }
        }
        .bottom {
            margin-top: 80rpx;
            .btn-zc {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #4A4A4A;
                line-height: 1.5;
                margin-top: 70rpx;
                text-align: center;
            }
        }
        .captcha {
            display: flex;
            padding:0 30rpx;
        }
    }
</style>
